<template>
  <div class="page-wrap">

    <!--<view class="fun-tab">-->
    <!--<view class="fun-tab-nav">-->
    <!--<view v-for="(cate,idx) in hotGoods.types" class="nav-item" @click="changeGoodsTab(cate.id)" :class="{active:hotGoods.select_type_id==cate.id}"  :key="idx">{{cate.title}}</view>-->
    <!--</view>-->
    <!--</view>-->

    <view class="fun-container">
      <view class="fun-container-item" @click="toDetail(item)" v-for="(item,idx) in lists" :key="idx">
        <view class="thumb thumb-contain" :style="{backgroundImage:'url('+item.goods_logo+')'}"></view>
        <view class="info">
          <view class="title">{{item.goods_title}}</view>
          <!--<view class="graytext line6 font14">消耗{{item.points_num}}积分</view>-->
          <view class="price-box flex flex-between ">
            <view class="price">{{item.points_num}}积分</view>
            <div class="font14 graytext">市价￥{{item.market_price}}</div>
          </view>
        </view>
      </view>
    </view>

  </div>
</template>

<script>

import { mapActions } from 'vuex'
import { goods as getGoodsList, points } from '@/api'
import { pageMixin } from '@/mixins'

export default {
  mixins: [pageMixin],
  components: {
    // TabbarComponents
  },
  data () {
    return {
      lists: [],
      hotGoods: {
        select_type_id: 1,
        types: [],
        page: 0,
        size: 999,
        isFinish: false,
        list: []

      }
    }
  },
  methods: {
    toDetail (goods) {
      uni.navigateTo({
        url: '/pages/points/detail?id=' + goods.id
      })
    },
    selectType (cate) {
      this.hotGoods.select_type_id = cate.id
    },
    changeGoodsTab (id) {
      var self = this

      if (self.hotGoods.select_type_id === id) {
        return
      }

      self.hotGoods.page = 0 // 重置
      self.hotGoods.isFinish = false
      self.hotGoods.select_type_id = id

      this.loadGoods(id, function (res) {
        self.hotGoods.list = res.list
      })
    },
    loadGoods (cate_id, cb) {
      var self = this

      if (self.hotGoods.isFinish) {
        error('到底啦')
        return
      }

      getGoodsList({
        cate_id: cate_id,
        page: self.hotGoods.page,
        size: self.hotGoods.size
      }).then(res => {
        cb && cb(res.data)
      })
    },
    ...mapActions(['setUserInfo'])
  },
  created () {
    points({ size: 999 }).then(res => {
      this.lists = this.lists.concat(res.data.list)
    })
    // this.setTabbarIndx(4)
    //
    // let self = this;
    //
    // getGoodsCate({type:'goods'}).then(res=>{
    //
    //     var ret = res.data.list;
    //
    //     self.hotGoods.types = ret;
    //     self.hotGoods.select_type_id = ret[0].id;
    //
    //     self.loadGoods(ret[0].id,function(res) {
    //
    //         self.hotGoods.list = res.list;
    //
    //         self.hotGoods.page++
    //
    //         //分页的
    //         if(parseInt(res.total) <= self.hotGoods.page * self.hotGoods.size){
    //             self.hotGoods.isFinish = true;
    //         }
    //     })
    //
    // })
  },
  mounted () {

  },
  onLoad () {
    console.log(22)
  },
  onShow () {

  },

  computed: {}
}
</script>

<style lang="scss" scoped="scoped">

  .page-wrap {
    background: #f8f8f8;
    padding-bottom: 50px;

  }

  .fun-tab-nav {
    white-space: nowrap;
    overflow-x: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    .nav-item {
      display: inline-block;
    }
  }
</style>
